<template>
	<div class="login">
		<div class="login_wrap">
			<div class="login_title">完美业务管理系统</div>
			<div class="login_box">
				<div class="login_input">
					<el-input
					  placeholder="请输入用户名"
					  v-model="username"
					  prefix-icon="el-icon-edit"
					  clearable
					  >
					</el-input>
				</div>
				<div class="login_input">
					<el-input
					  placeholder="请输入密码"
					  v-model="password"
					  prefix-icon="el-icon-location"
					  clearable
					  type="password"
					  >
					</el-input>
				</div>
				<div>
					<el-checkbox v-model="checked">记住密码</el-checkbox>
				</div>
				<div>
					<el-button type="primary" class="login_btn" @click="toLogin">登陆</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default{
	data(){
		return {
			username:"",
			password:"",
			checked:false
		}
	},
	methods:{
		toLogin(){
			if(this.username !== "admin" || this.password !== "admin"){
				this.$message({
		          message: '请输入正确的用户名和密码',
		          type: 'warning'
		        });
			}else{
				this.$message({
		          message: '登录成功',
		          type: 'success',
		          duration:1500
		        });
		        setTimeout(()=>{
		        	this.$emit("toLogin")
		        	this.$router.push({path:"/index/memberIndex",query:{first:'会员管理',second:'会员信息',flag:true}})
      				// window.localStorage.setItem("perfectUsername",this.username);
		        },1500)
					
			}
		}
	}
}
</script>
<style>
*{
	margin:0;
	padding: 0
}
.login_wrap{
	width: 1000px;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%,-50%);
}
.login{
	height: 100vh;
	background: #2c3f53
}
.login_input{
	margin-bottom: 15px;
}
.login_title{
	text-align: center;
	font-size: 60px;
	color: #ffffff;
	margin-bottom: 30px;
}
.login_box{
	width:400px;
	padding: 50px;
	box-sizing:border-box;
	margin:0 auto;
	background: #ffffff
}
.login_btn{
	width: 100%
}
</style>